<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <template #header>
        <div class="profile-header">
          <h2>个人中心</h2>
        </div>
      </template>

      <el-row :gutter="20">
        <!-- 左侧：用户头像和基本信息 -->
        <el-col :span="8">
          <el-card class="profile-card" shadow="never">
            <template #header>
              <div class="card-header">
                <h3>我的信息</h3>
              </div>
            </template>
            <div class="profile-avatar-section">
              <div class="avatar-container">
                <img
                  v-if="profileForm.avatarUrl"
                  :src="profileForm.avatarUrl"
                  class="avatar"
                  alt="用户头像"
                  @error="handleImageError"
                />
                <el-icon v-else class="avatar-uploader-icon">
                  <User />
                </el-icon>
                <div class="avatar-overlay">点击下方按钮更换头像</div>
              </div>

              <!-- 上传组件 -->
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :http-request="handleAvatarUpload"
                :disabled="avatarUploading"
              >
                <el-button
                  :loading="avatarUploading"
                  type="primary"
                  icon="Upload"
                >
                  {{ avatarUploading ? '上传中...' : '更换头像' }}
                </el-button>
              </el-upload>

              <p class="upload-tip">支持 JPG/PNG 格式，大小不超过 2MB</p>

              <h4 class="profile-username">{{ profileForm.username }}</h4>
              <p class="profile-nickname">{{ profileForm.nickname || '未设置昵称' }}</p>
              <p class="profile-signature">{{ profileForm.signature || '这个人很懒，什么都没有留下~' }}</p>
              <div class="profile-stats">
                <el-statistic :value="followerCount" title="粉丝" />
                <el-statistic :value="followingCount" title="关注" />
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧：编辑表单 -->
        <el-col :span="16">
          <el-card class="profile-card" shadow="never">
            <template #header>
              <div class="card-header">
                <h3>编辑个人信息</h3>
              </div>
            </template>
            <el-form
              ref="profileFormRef"
              :model="profileForm"
              :rules="profileRules"
              label-width="100px"
              label-position="left"
            >
              <el-form-item label="昵称" prop="nickname">
                <el-input
                  v-model="profileForm.nickname"
                  placeholder="请输入昵称"
                  clearable
                />
              </el-form-item>

              <el-form-item label="个性签名" prop="signature">
                <el-input
                  v-model="profileForm.signature"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入个性签名"
                  maxlength="100"
                  show-word-limit
                />
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @click="updateProfile"
                  :loading="saving"
                  icon="Check"
                >
                  保存修改
                </el-button>
                <el-button
                  @click="resetForm"
                  icon="Refresh"
                >
                  重置
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>

      <!-- *** 新增: 关注列表和粉丝列表 *** -->
      <el-card class="follow-list-card" shadow="never" style="margin-top: 20px;">
        <template #header>
          <div class="card-header">
            <h3>我的社交</h3>
          </div>
        </template>
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="我的关注" name="following">
            <div v-loading="followingLoading" element-loading-text="拼命加载中">
              <el-alert
                v-if="followingErrorMessage"
                :title="followingErrorMessage"
                type="error"
                show-icon
                closable
                style="margin-bottom: 20px;"
              />
              <div v-if="followingList.length === 0 && !followingLoading" class="no-following">
                <p>您还没有关注任何人。</p>
              </div>
              <div v-else class="following-list">
                <el-table :data="followingList" style="width: 100%" stripe>
                  <el-table-column prop="username" label="用户名" width="150">
                    <template #default="scope">
                      <el-link @click="goToUser(scope.row.id)" type="primary">{{ scope.row.username }}</el-link>
                    </template>
                  </el-table-column>
                  <el-table-column prop="nickname" label="昵称" width="150" />
                  <el-table-column prop="avatarUrl" label="头像" width="80">
                    <template #default="scope">
                      <el-avatar
                        :src="scope.row.avatarUrl || defaultAvatar"
                        :size="40"
                        shape="circle"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column prop="signature" label="签名" min-width="200" />
                  <el-table-column prop="createdAt" label="注册时间" width="180">
                    <template #default="scope">
                      {{ formatDate(scope.row.createdAt) }}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="120">
                    <template #default="scope">
                      <el-button size="small" @click="unfollowUser(scope.row.id)">取消关注</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  v-model:current-page="followingCurrentPage"
                  v-model:page-size="followingPageSize"
                  :page-sizes="[10, 20, 50]"
                  :total="followingTotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleFollowingSizeChange"
                  @current-change="handleFollowingCurrentChange"
                  style="margin-top: 20px; justify-content: center;"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我的粉丝" name="followers">
            <div v-loading="followerLoading" element-loading-text="拼命加载中">
              <el-alert
                v-if="followerErrorMessage"
                :title="followerErrorMessage"
                type="error"
                show-icon
                closable
                style="margin-bottom: 20px;"
              />
              <div v-if="followerList.length === 0 && !followerLoading" class="no-followers">
                <p>您还没有任何粉丝。</p>
              </div>
              <div v-else class="follower-list">
                <el-table :data="followerList" style="width: 100%" stripe>
                  <el-table-column prop="username" label="用户名" width="150">
                    <template #default="scope">
                      <el-link @click="goToUser(scope.row.id)" type="primary">{{ scope.row.username }}</el-link>
                    </template>
                  </el-table-column>
                  <el-table-column prop="nickname" label="昵称" width="150" />
                  <el-table-column prop="avatarUrl" label="头像" width="80">
                    <template #default="scope">
                      <el-avatar
                        :src="scope.row.avatarUrl || defaultAvatar"
                        :size="40"
                        shape="circle"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column prop="signature" label="签名" min-width="200" />
                  <el-table-column prop="createdAt" label="注册时间" width="180">
                    <template #default="scope">
                      {{ formatDate(scope.row.createdAt) }}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="120">
                    <template #default="scope">
                      <el-button size="small" @click="followUser(scope.row.id)" v-if="!isFollowing(scope.row.id)">关注</el-button>
                      <el-button size="small" type="danger" @click="unfollowUser(scope.row.id)" v-else>取消关注</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  v-model:current-page="followerCurrentPage"
                  v-model:page-size="followerPageSize"
                  :page-sizes="[10, 20, 50]"
                  :total="followerTotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleFollowerSizeChange"
                  @current-change="handleFollowerCurrentChange"
                  style="margin-top: 20px; justify-content: center;"
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- *** --- *** -->

      <!-- 显示成功/错误信息 -->
      <div v-if="message" :class="['message', message.type]">
        {{ message.text }}
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { ElMessage,ElMessageBox } from 'element-plus'
import { User, Upload, Check, Refresh } from '@element-plus/icons-vue'
import { updateProfile as apiUpdateProfile, uploadAvatar, getCurrentUserProfile } from '@/services/userService'
import {getMyFollowingCount,
  getMyFollowerCount,
  getMyFollowingList,
  getMyFollowerList,
  followUser as apiFollowUser,
  unfollowUser as apiUnfollowUser} from '@/services/userService'

import dayjs from 'dayjs'; // 确保已经安装: npm install dayjs
import { useRouter } from 'vue-router';

const authStore = useAuthStore()
const router = useRouter();

// --- 状态管理 ---
const profileFormRef = ref()
const saving = ref(false)
const message = ref(null)
const avatarUploading = ref(false)
const loading = ref(false)

// --- 用户信息 (来自 Store) ---
const userInfo = ref(authStore.currentUser || {})
// --- 新增: 关注/粉丝列表状态管理 ---

const activeTab = ref('following'); // 默认激活“我的关注”标签页

const followingLoading = ref(false);
const followingErrorMessage = ref('');
const followingList = ref([]);
const followingTotal = ref(0);
const followingCurrentPage = ref(1);
const followingPageSize = ref(10);

const followerLoading = ref(false);
const followerErrorMessage = ref('');
const followerList = ref([]);
const followerTotal = ref(0);
const followerCurrentPage = ref(1);
const followerPageSize = ref(10);
// --- ---

// --- 表单数据模型 ---
const profileForm = reactive({
  avatarUrl: userInfo.value?.avatarUrl || '',
  nickname: userInfo.value?.nickname || '',
  signature: userInfo.value?.signature || '',
  username: userInfo.value?.username || '',
  email: userInfo.value?.email || ''
})

// --- 新增: 计算属性获取关注数和粉丝数 ---
const followingCount = computed(() => authStore.currentUser?.followingCount || 0);
const followerCount = computed(() => authStore.currentUser?.followerCount || 0);

// 日期格式化函数
const formatDate = (dateString) => {
  if (!dateString) return '';
  return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss');
};

// 跳转到用户详情页
const goToUser = (userId) => {
  if (userId) {
    router.push(`/users/${userId}`);
  }
};

// --- 表单验证规则 ---
const profileRules = {
  nickname: [
    { required: false, message: '', trigger: 'blur' }
  ],
  signature: [
    { required: false, message: '', trigger: 'blur' }
  ]
}



// --- 方法 ---

// 获取当前用户信息
const fetchCurrentUserProfile = async () => {
  loading.value = true
  try {
    const response = await getCurrentUserProfile()
    Object.assign(profileForm, response.data)
     // 更新 authStore 中的用户信息
    authStore.setAuth({
      user: response.data,
      token: authStore.token
    })
  } catch (error) {
    console.error('Failed to fetch current user profile:', error)
    ElMessage.error(error.response?.data?.message || '获取用户信息失败')
  } finally {
    loading.value = false
  }
}

// 重置表单
const resetForm = () => {
  const currentUser = authStore.currentUser
  if (currentUser) {
    profileForm.id = currentUser.id
    profileForm.username = currentUser.username
    profileForm.email = currentUser.email
    profileForm.nickname = currentUser.nickname
    profileForm.avatarUrl = currentUser.avatarUrl
    profileForm.signature = currentUser.signature
  }
  if (profileFormRef.value) {
    profileFormRef.value.resetFields()
  }
  message.value = null
}

// 头像上传前检查
const beforeAvatarUpload = (file) => {
  const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPGOrPNG) {
    ElMessage.error('头像图片必须是 JPG 或 PNG 格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('头像图片大小不能超过 2MB!')
    return false
  }
  return true
}

// 图片加载错误处理
const handleImageError = (event) => {
  console.error('头像图片加载失败', event)
  // 可以设置默认头像
  event.target.src = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
}

// 直接上传头像文件处理
const handleAvatarUpload = async (options) => {
  const { file } = options
  avatarUploading.value = true
  message.value = null

  try {
    const formData = new FormData()
    formData.append('avatar', file)

    const response = await uploadAvatar(formData)
    const newAvatarUrl = response.data.avatarUrl

    // 更新头像URL
    profileForm.avatarUrl = newAvatarUrl

    // 更新 authStore
    const updatedUser = { ...authStore.currentUser, avatarUrl: newAvatarUrl }
    authStore.setAuth({
      user: updatedUser,
      token: authStore.token
    })

    ElMessage.success('头像上传成功')
  } catch (error) {
    console.error('Avatar upload failed:', error)
    ElMessage.error(error.response?.data?.message || '头像上传失败')
  } finally {
    avatarUploading.value = false
  }
}

// 更新用户信息
const updateProfile = async () => {
  if (!profileFormRef.value) return

  try {
    saving.value = true
    message.value = null

    const response = await apiUpdateProfile({
      nickname: profileForm.nickname,
      signature: profileForm.signature,
      avatarUrl: profileForm.avatarUrl
    })

    // 更新 Store 中的用户信息
    const updatedUserInfo = {
      ...authStore.currentUser,
      nickname: profileForm.nickname,
      signature: profileForm.signature,
      avatarUrl: profileForm.avatarUrl
    }
    authStore.setAuth({ user: updatedUserInfo, token: authStore.token })

    ElMessage.success('个人信息更新成功')
    message.value = { type: 'success', text: '个人信息更新成功!' }
  } catch (error) {
    console.error('Profile update failed:', error)
    const errorMsg = error.response?.data?.message || '更新失败'
    ElMessage.error(errorMsg)
    message.value = { type: 'error', text: errorMsg }
  } finally {
    saving.value = false
  }
}

// --- 新增: 获取关注列表 ---
const fetchFollowingList = async (page = 0, size = 10) => {
  followingLoading.value = true;
  followingErrorMessage.value = '';
  try {
    const response = await getMyFollowingList({
      page: page,
      size: size
    });
    followingList.value = response.data.content || [];
    followingTotal.value = response.data.totalElements || response.data.total || 0;
    followingCurrentPage.value = page + 1;
  } catch (error) {
    console.error('Failed to fetch following list:', error);
    followingErrorMessage.value = error.response?.data?.message || '获取关注列表失败';
    ElMessage.error(followingErrorMessage.value);
    followingList.value = [];
  } finally {
    followingLoading.value = false;
  }
};
// --- ---
// --- 新增: 分页变化处理 ---
const handleFollowingSizeChange = (val) => {
  followingPageSize.value = val;
  fetchFollowingList(0, val); // 页大小改变时回到第一页
};

const handleFollowingCurrentChange = (val) => {
  followingCurrentPage.value = val;
  fetchFollowingList(val - 1, followingPageSize.value);
};

const handleFollowerSizeChange = (val) => {
  followerPageSize.value = val;
  fetchFollowerList(0, val); // 页大小改变时回到第一页
};

const handleFollowerCurrentChange = (val) => {
  followerCurrentPage.value = val;
  fetchFollowerList(val - 1, followerPageSize.value);
};
// --- ---

// --- 新增: 获取粉丝列表 ---
const fetchFollowerList = async (page = 0, size = 10) => {
  followerLoading.value = true;
  followerErrorMessage.value = '';
  try {
    const response = await getMyFollowerList({
      page: page,
      size: size
    });
    followerList.value = response.data.content || [];
    followerTotal.value = response.data.totalElements || response.data.total || 0;
    followerCurrentPage.value = page + 1;
  } catch (error) {
    console.error('Failed to fetch follower list:', error);
    followerErrorMessage.value = error.response?.data?.message || '获取粉丝列表失败';
    ElMessage.error(followerErrorMessage.value);
    followerList.value = [];
  } finally {
    followerLoading.value = false;
  }
};
// --- ---
// --- 新增: 关注/取消关注用户 ---
const followUser = async (targetUserId) => {
  if (!authStore.isAuthenticated) {
    router.push('/login');
    return;
  }
  try {
    await apiFollowUser(targetUserId);
    ElMessage.success('关注成功');
    // 更新本地关注列表 (简化处理，重新加载第一页)
    await fetchFollowingList(0, followingPageSize.value);
    // 更新 authStore 中的 currentUser.followingCount
    const updatedUser = { ...authStore.currentUser, followingCount: (authStore.currentUser.followingCount || 0) + 1 };
    authStore.setAuth({ user: updatedUser, token: authStore.token });
  } catch (error) {
    console.error('Follow user failed:', error);
    ElMessage.error(error.response?.data?.message || '关注失败');
  }
};

const unfollowUser = async (targetUserId) => {
  if (!authStore.isAuthenticated) {
    router.push('/login');
    return;
  }
  ElMessageBox.confirm(
    '确定要取消关注该用户吗？',
    '确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      await apiUnfollowUser(targetUserId);
      ElMessage.success('取消关注成功');
      // 更新本地关注列表 (简化处理，重新加载第一页)
      await fetchFollowingList(0, followingPageSize.value);
      // 更新 authStore 中的 currentUser.followingCount
      const updatedUser = { ...authStore.currentUser, followingCount: Math.max(0, (authStore.currentUser.followingCount || 0) - 1) };
      authStore.setAuth({ user: updatedUser, token: authStore.token });
    } catch (error) {
      console.error('Unfollow user failed:', error);
      ElMessage.error(error.response?.data?.message || '取消关注失败');
    }
  }).catch(() => {
    // 用户取消操作
  });
};
// --- ---

// --- 新增: 检查是否已关注某用户 ---
const isFollowing = (userId) => {
  // 简化处理：检查 userId 是否在 followingList 中
  return followingList.value.some(followedUser => followedUser.id === userId);
};
// --- ---

// --- 生命周期钩子 ---
onMounted(() => {
  resetForm()
  fetchCurrentUserProfile()
  fetchFollowingList(followingCurrentPage.value - 1, followingPageSize.value);
  fetchFollowerList(followerCurrentPage.value - 1, followerPageSize.value);
})
</script>

<style scoped>
.profile-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.profile-card {
  border: none;
  background: transparent;
}

.card-header {
  text-align: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.card-header h3 {
  margin: 0;
  font-size: 1.3em;
  font-weight: 600;
  color: #303133;
}

.profile-avatar-section {
  text-align: center;
  padding: 20px;
}

.avatar-container {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  margin: 0 auto 15px auto;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
  border-radius: 50%;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.profile-username {
  font-size: 1.5em;
  font-weight: 600;
  margin: 10px 0 5px 0;
  color: #303133;
}

.profile-nickname {
  margin: 5px 0 15px 0;
  color: #666;
  font-size: 1em;
}

.profile-signature {
  color: #909399;
  font-style: italic;
  margin: 12px 0;
  padding: 0 20px;
  font-size: 0.9em;
  line-height: 1.5;
}

/* *** 新增: 用户统计数据样式 ***
     *** 使用 Element Plus Statistic 组件 ***
*/
.profile-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
  padding: 15px;
  background-color: #f0f2f5;
  border-radius: 8px;
}

.profile-stats .el-statistic {
  text-align: center;
}

.profile-stats .el-statistic__head {
  color: #909399;
  font-size: 0.9em;
}

.profile-stats .el-statistic__content {
  color: #303133;
  font-size: 1.2em;
  font-weight: 600;
}
/* *** --- *** */

.el-form {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.el-input__inner,
.el-textarea__inner {
  border-radius: 6px;
  padding: 10px 15px;
  font-size: 14px;
}

.el-button {
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.2s;
}

.el-button--primary {
  background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
  border: none;
}

.el-button--primary:hover {
  background: linear-gradient(135deg, #5a4f95 0%, #9561d8 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(106, 142, 251, 0.4);
}

.message {
  padding: 15px;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9em;
}

.message.success {
  background-color: #f0f9eb;
  color: #67c23a;
  border: 1px solid #e1f3d8;
}

.message.error {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fde2e2;
}

.avatar-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 8px;
  font-size: 13px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-container:hover .avatar-overlay {
  opacity: 1;
}

/* *** 新增: 关注列表和粉丝列表样式 ***
     *** 使用 Element Plus Tabs 组件 ***
*/
.follow-list-card {
  border: none;
  background: transparent;
}

.follow-list-card .card-header {
  text-align: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.follow-list-card .card-header h3 {
  margin: 0;
  font-size: 1.3em;
  font-weight: 600;
  color: #303133;
}

.following-list,
.follower-list {
  margin-bottom: 20px;
}

.no-following,
.no-followers {
  text-align: center;
  color: #999;
  font-size: 1.1em;
  margin-top: 20px;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 4px;
}

/* *** --- *** */

/* Element Plus Button 样式微调 */
:deep(.el-button--text) {
  color: #409eff;
}

:deep(.el-button--text:hover) {
  color: #66b1ff;
}

/* Element Plus Input 样式微调 */
:deep(.el-input__inner) {
  border-radius: 6px;
}

:deep(.el-textarea__inner) {
  border-radius: 6px;
}

/* Element Plus Card 样式微调 */
:deep(.el-card) {
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.el-card__header) {
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-card__body) {
  padding: 20px;
}

/* Element Plus Table 样式微调 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
}

:deep(.el-table td, .el-table th) {
  padding: 12px 0;
}

/* Element Plus Pagination 样式微调 */
:deep(.el-pagination) {
  justify-content: center;
}

/* Element Plus Statistic 样式微调 */
:deep(.el-statistic) {
  text-align: center;
}

:deep(.el-statistic__head) {
  color: #909399;
  font-size: 0.9em;
}

:deep(.el-statistic__content) {
  color: #303133;
  font-size: 1.2em;
  font-weight: 600;
}

/* Responsive design */
@media (max-width: 768px) {
  .el-col {
    width: 100%;
  }

  .profile-container {
    padding: 0 12px;
  }

  .profile-stats {
    gap: 15px;
    padding: 10px;
  }

  .profile-stats .el-statistic__content {
    font-size: 1em;
  }

  .profile-stats .el-statistic__head {
    font-size: 0.8em;
  }
}
</style>
